<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="http://mars3d.cn/favicon.ico" />
    <title>vue功能示例 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <!--第三方lib-->
    <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/" include="vue,font-awesome,turf,mars3d"></script>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <style>
    .el-radio {
      color: #ffffff;
    }
    .colorStyle {
      position: absolute;
      top: 23.5%;
    }
    .baseColor {
      position: absolute;
      top: 53.5%;
    }

    /* 表格css样式 */
    .mars-table tr td {
      padding: 5px 5px 5px 10px;
      text-align: left;
      border: 1px solid #cde1de;
      max-width: 150px;
      word-wrap: break-word;
    }
  </style>
  <body>
    <div id="app" style="width: 100%; height: 100%">
      <div id="mars3dContainer" class="mars3d-container"></div>

      <!-- 面板 -->
      <div class="infoview">
        <table class="mars-table">
          <tbody>
            <tr>
              <td rowspan="9">场景Scene</td>
              <td class="nametd">场景模式</td>
              <td>
                <el-select v-model="value" size="mini" style="width: 116px" @change="setSceneOptions('sceneMode', value)">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="nametd">高动态渲染</td>
              <td>
                <el-radio-group v-model="height">
                  <el-radio label="1" @change="setSceneOptions('highDynamicRange',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('highDynamicRange',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">快速抗锯齿</td>
              <td>
                <el-radio-group v-model="fxaa">
                  <el-radio label="1" @change="setSceneOptions('fxaa',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('fxaa',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">显示太阳</td>
              <td>
                <el-radio-group v-model="sun">
                  <el-radio label="1" @change="setSceneOptions('showSun',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('showSun',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">显示月亮</td>
              <td>
                <el-radio-group v-model="moon">
                  <el-radio label="1" @change="setSceneOptions('showMoon',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('showMoon',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">显示天空盒</td>
              <td>
                <el-radio-group v-model="skyBox">
                  <el-radio label="1" @change="setSceneOptions('showSkyBox',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('showSkyBox',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr title="请关闭天空盒看效果">
              <td class="nametd">空间背景颜色</td>
              <td>
                <el-color-picker
                  v-model="backgroundColor"
                  size="mini"
                  @change=" setSceneOptions('backgroundColor', backgroundColor)"
                ></el-color-picker>
                <input type="text" v-model="backgroundColor" class="colorStyle" style="width: 80px" />
              </td>
            </tr>
            <tr>
              <td class="nametd">大气外光圈</td>
              <td>
                <el-radio-group v-model="skyAt">
                  <el-radio label="1" @change="setSceneOptions('showSkyAtmosphere', true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('showSkyAtmosphere', false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">雾化效果</td>
              <td>
                <el-radio-group v-model="fog">
                  <el-radio label="1" @change="setSceneOptions('fog', true)">是</el-radio>
                  <el-radio label="2" @change="setSceneOptions('fog', false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <!-- 地球属性 -->
            <tr>
              <td rowspan="6">地球Globe</td>
              <td class="nametd">地形夸张倍数</td>
              <td>
                <el-slider
                  v-model="terrainSlider"
                  :min="1"
                  :max="80"
                  :step="1"
                  @change="setSceneGlobeOptions('terrainExaggeration', terrainSlider)"
                ></el-slider>
              </td>
            </tr>
            <tr>
              <td class="nametd">昼夜区域</td>
              <td>
                <el-radio-group v-model="light">
                  <el-radio label="1" @change="setSceneGlobeOptions('enableLighting',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneGlobeOptions('enableLighting',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">绘制地面大气</td>
              <td>
                <el-radio-group v-model="atmosphere">
                  <el-radio label="1" @change="setSceneGlobeOptions('showGroundAtmosphere',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneGlobeOptions('showGroundAtmosphere',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">深度监测</td>
              <td>
                <el-radio-group v-model="depthTest">
                  <el-radio label="1" @change="setSceneGlobeOptions('depthTestAgainstTerrain',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneGlobeOptions('depthTestAgainstTerrain',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">显示底图</td>
              <td>
                <el-radio-group v-model="showImg">
                  <el-radio label="1" @change="map.basemap=2021">是</el-radio>
                  <el-radio label="2" @change="map.basemap=undefined">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr title="请关闭底图后看效果">
              <td class="nametd">地球背景色</td>
              <td>
                <el-color-picker v-model="baseColor" size="mini" @change="setSceneGlobeOptions('baseColor', baseColor)"></el-color-picker>
                <input type="text" v-model="baseColor" class="baseColor" style="width: 80px" />
              </td>
            </tr>

            <tr>
              <td rowspan="10">鼠标交互</td>
              <td class="nametd">缩放地图</td>
              <td>
                <el-radio-group v-model="zooms">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('enableZoom',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('enableZoom',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">倾斜相机(3D和2.5D)</td>
              <td>
                <el-radio-group v-model="tilt">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('enableTilt',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('enableTilt',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">旋转转换位置(3D和2D)</td>
              <td>
                <el-radio-group v-model="rotate">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('enableRotate',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('enableRotate',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">平移地图(2D和2.5D)</td>
              <td>
                <el-radio-group v-model="translate">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('enableTranslate',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('enableTranslate',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">可操作南北极</td>
              <td>
                <el-radio-group v-model="axis">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('constrainedAxis',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('constrainedAxis',true)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>

            <tr>
              <td class="nametd">可否进入地下</td>
              <td>
                <el-radio-group v-model="detection">
                  <el-radio label="1" @change="setSceneCameraControllerOptions('enableCollisionDetection',true)">是</el-radio>
                  <el-radio label="2" @change="setSceneCameraControllerOptions('enableCollisionDetection',false)">否</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="nametd">最小碰撞高度(米)</td>
              <td>
                <el-slider
                  v-model="collisionSlider"
                  :min="1"
                  :max="500000"
                  :step="100"
                  @change="setSceneCameraControllerOptions('minimumCollisionTerrainHeight', collisionSlider)"
                ></el-slider>
              </td>
            </tr>

            <tr>
              <td class="nametd">相机最近视距(米)</td>
              <td>
                <el-slider
                  v-model="minimumZoomSlider"
                  :min="1"
                  :max="10000"
                  :step="100"
                  @change="setSceneCameraControllerOptions('minimumZoomDistance', minimumZoomSlider)"
                ></el-slider>
              </td>
            </tr>
            <tr>
              <td class="nametd">相机最远视距(米)</td>
              <td>
                <el-slider
                  v-model="maximumZoomSlider"
                  :min="10000"
                  :max="90000000"
                  :step="1000"
                  @change="setSceneCameraControllerOptions('maximumZoomDistance', maximumZoom)"
                ></el-slider>
              </td>
            </tr>

            <tr>
              <td class="nametd">滚轮放大倍数</td>
              <td>
                <el-slider
                  v-model="cameraSlider"
                  :min="1"
                  :max="10"
                  :step="1"
                  @change="setSceneCameraControllerOptions('zoomFactor', cameraSlider)"
                ></el-slider>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script>
      const App = {
        data() {
          return {
            options: [
              {
                value: 2,
                label: "二维视图",
              },
              {
                value: 3,
                label: "三维视图",
              },
              {
                value: 1,
                label: "哥伦布视图",
              },
            ],
            value: 3,

            //颜色拾取器默认值
            backgroundColor: "#0b0b0b", //空间背景颜色默认值
            baseColor: "#546a53", //地球背景颜色默认值

            //slider滑块
            terrainSlider: 1, //地形夸张倍数默认值
            cameraSlider: 1, //滚轮放大倍数默认值
            maximumZoomSlider: 50000000, //相机最远视距默认值
            minimumZoomSlider: 1, //相机最近视距默认值
            collisionSlider: 15000, //最小碰撞高度默认值

            // radio单选框默认值 1表示是 2表示否
            height: "2",
            fxaa: "1",
            sun: "1",
            moon: "1",
            skyBox: "1",
            skyAt: "1",
            fog: "1",
            light: "2",
            atmosphere: "1",
            depthTest: "2",
            showImg: "1",
            zooms: "1",
            tilt: "1",
            rotate: "1",
            translate: "1",
            axis: "2",
            detection: "2",
          };
        },
        // 1.1 资源创建
        mounted() {
          //判断webgl支持
          if (!mars3d.Util.webglreport()) {
            mars3d.Util.webglerror();
          }
          //读取 config.json 配置文件
          let configUrl = "config/config.json";
          mars3d.Resource.fetchJson({ url: configUrl })
            .then((json) => {
              //构建地图
              this.initMap(json.map3d);
            })
            .otherwise((error) => {
              console.log("加载JSON出错", error);
              //this.$message.success(error && error.message, '出错了')
            });
        },
        // 1.2 资源销毁
        beforeDestroy() {
          this.map.destroy();
        },

        methods: {
          initMap(options) {
            //合并属性参数，可覆盖config.json中的对应配置
            var mapOptions = mars3d.Util.merge(options, {
              scene: {
                center: { lat: 43.260076, lng: 59.511019, alt: 28590990, heading: 0, pitch: -90 },
              },
            });

            //创建三维地球场景
            this.map = new mars3d.Map("mars3dContainer", mapOptions);

            var graphicLayer = new mars3d.layer.GraphicLayer();
            this.map.addLayer(graphicLayer);
          },
          setSceneOptions(name, value) {
            var options = {};
            options[name] = value;
            this.map.setSceneOptions(options);
          },
          setSceneGlobeOptions(name, value) {
            var options = { globe: {} };
            options.globe[name] = value;
            this.map.setSceneOptions(options);
          },
          setSceneCameraControllerOptions(name, value) {
            var options = { cameraController: {} };
            options.cameraController[name] = value;
            this.map.setSceneOptions(options);
          },
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
